<template>
	<view>
		<view class="liketop">
			<view class="liketleft">
				<image src="../../static/icon_cha.png"></image>
				<text class="ml5">已收藏{{likeList.length}}个餐宴</text>
			</view>
			<view class="liketright" @click="removeall">
				<image src="../../static/icon_clear.png"></image>
				<text class="rtext ml5">清空</text>
			</view>
		</view>
		<view class="likeiitem" v-for="(item,index) in likeList" :key=index>
			<image :src="item.img" class="w100 bottomtop"></image>
			<view class="bottom jsbewteen">
				<view class="bottoml dp fdcolumn">
					<text class="fwb f16">{{item.goodsname}}</text>
					<text class="mt5 cF07C66">￥{{item.price}}/桌</text>
				</view>
				<view class="masking">
					<image src="../../static/icon_fire.png" class="iconimg"></image>
					<text class="cfff">{{item.fire}}</text>
				</view>
				<view class="bottomr dp fdcolumn alcenter jscenter" @click="cancelgood(item.goodid)">
					<image src="../../static/footer2.png" class="logimg"></image>
					<text class="mt5">取消收藏</text>
				</view>
			</view>
		</view>
		<!-- 图标 -->
		<view class="deleteall" v-if="likeList.length==0">
			<image src="../../static/nomore2.png"></image>
		</view>
	</view>
</template>

<script>
	import goods from "@/json/goods"
	export default {
		data() {
			return {
				likeList: [], //收藏列表
				showing: true, //可以滚动到底部加载的数据
			}
		},
		methods: {
			//点击清空
			removeall() {
				let _this = this
				uni.showModal({
					title: '清空收藏',
					confirmColor: 'red',
					content: '清空收藏后,将无法回复',
					success: function(res) {
						if (res.confirm) {
							_this.likeList = []
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//点击取消收藏
			cancelgood(id) {
				let i = 0
				for (let obj of this.likeList) {
					if (obj.goodid == id) {
						this.likeList.splice(i, 1)
					}
					i++
				}
			},
		},
		//触底事件
		onReachBottom() {
			let nearr = goods.newgoodlist;
			//弹出框
			wx.showToast({
				title: '加载中',
				icon: 'loading',
				duration: 2000
			})
			if (this.showing) {
				this.likeList = this.likeList.concat(nearr)
			} 
			//判断如果最后一次数据,长度小于4 说明下一页没有数据了
			if(nearr.length<4){
				this.showing=false   //不能请求
			}
		},

		onLoad() {
			this.likeList = goods.goodslist
		}
	}
</script>

<style>
	.liketop {
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.liketleft image {
		width: 15px;
		height: 15px;
	}

	.liketright image {
		width: 15px;
		height: 15px;
	}

	.rtext {
		color: #ccc;
	}

	.likeiitem {
		position: relative;
		box-shadow: 0px 3px 5px #ccc;
		width: 94%;
		margin: auto;
		border-radius: 10px;
		margin-bottom: 15px;
	}

	.bottomtop {
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		height: 170px;
	}

	.bottom {
		display: flex;
		padding: 8px 10px;
	}

	.masking {
		position: absolute;
		right: 13px;
		bottom: 83px;
		border-radius: 7px;
		background-color: rgba(180, 180, 180, 0.8);
		padding: 7px;
	}

	.logimg {
		width: 20px;
		height: 20px;
	}

	.iconimg {
		width: 15px;
		height: 15px;
	}

	.deleteall {
		width: 80%;
		height: 200px;
		margin: auto;
		margin-top: 40px;
	}

	.deleteall image {
		width: 100%;
		height: 200px;
	}
</style>
